<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Knockout.js</title>

        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="root">
            <script id="customMessageTemplate" type="text/html">
                <em
                    class="customMessage"
                    data-bind="validationMessage: field"
                ></em>
            </script>

            <fieldset>
                <legend class="well">
                    用户：
                    <strong data-bind="text: errors().length"></strong> 个错误
                </legend>

                <div class="row">
                    <label>名:</label>
                    <input type="text" data-bind="textInput: firstName" />
                </div>

                <div class="row">
                    <label>姓:</label>
                    <input data-bind="value: lastName" />
                </div>

                <div
                    class="row"
                    data-bind="validationOptions: { messageTemplate: 'customMessageTemplate' }"
                >
                    <div class="row">
                        <label>电子邮件:</label>
                        <input
                            data-bind="value: emailAddress"
                            required="required"
                            pattern="@"
                        />
                    </div>
                    <div class="row">
                        <label>位置:</label>
                        <input data-bind="value: location" />
                    </div>
                    <div class="row">
                        <label>年龄:</label>
                        <input data-bind="value: age" required="required" />
                    </div>
                </div>

                <div class="row">
                    <label>订阅:</label>
                    <select
                        data-bind="value: subscription, options: subscriptionOptions, optionsCaption: '请选择...'"
                    ></select>
                </div>

                <div class="row">
                    <label>密码:</label>
                    <input data-bind="value: password" type="password" />
                </div>

                <div class="row">
                    <label>确认密码:</label>
                    <input data-bind="value: confirmPassword" type="password" />
                </div>

                <div class="row">
                    <label>验证码：10 + 1 = </label>
                    <input data-bind="value: captcha" required="required" />
                </div>
            </fieldset>

            <fieldset>
                <button type="button" data-bind="click: submit">提交</button>
                &nbsp;
                <button type="button" data-bind="click: reset">重置</button>
                &nbsp;
                <button type="button" data-bind="click: requireLocation">
                    使 位置 变为必填
                </button>
            </fieldset>
        </div>
        <script src="../scripts/lib/require.js" data-main="index.js"></script>
    </body>
</html>
